<template>
  <s-layout title="书海探索"  navbar="custom" :bgStyle="{ backgroundColor: '#F8F9FA' }">
    <scroll-view scroll-y class="refactored-page-wrapper">

      <!-- Refactored Header -->
      <view class="hero-banner-container">
        <image class="hero-banner-image" src="https://img2.baidu.com/it/u=1733356373,1772597467&fm=253&fmt=auto&app=138&f=JPEG?w=1600&h=500" mode="aspectFill"></image>
        <view class="hero-banner-overlay"></view>
        <view class="hero-banner-content">
          <text class="hero-banner-title">书海拾贝</text>
          <text class="hero-banner-subtitle">发现你的下一本好书与书友</text>
        </view>
      </view>

      <!-- Refactored Quick Actions -->
      <view class="quick-actions-bar">
        <view class="action-item-button" @tap="handleAction('member')">
          <view class="action-icon-container branch-bg">
            <!-- <image class="action-icon-image" src="https://imagecgr.oss-cn-beijing.aliyuncs.com/%E4%BC%9A%E5%91%98.png"
              mode="aspectFit"></image> -->
              <text class="cicon-demo" style="font-size: 50rpx;color: #DB696F;"></text>
          </view>
          <text class="action-item-label">成为会员</text>
        </view>
        <view class="action-item-button" @tap="TocreateActivity">
          <view class="action-icon-container branch-bg">
            <!-- <image class="action-icon-image" src="https://imagecgr.oss-cn-beijing.aliyuncs.com/%E6%97%A5%E5%8E%86.png"
              mode="aspectFit"></image> -->
              <text class="cicon-book" style="font-size: 50rpx;color: #DB696F;"></text>
          </view>
          <text class="action-item-label">发起活动</text>
        </view>
        <view class="action-item-button" @tap="handleAction('branch')">
          <view class="action-icon-container branch-bg">
            <!-- <image class="action-icon-image" src="https://imagecgr.oss-cn-beijing.aliyuncs.com/%E7%BE%A4%E8%81%8A.png"
              mode="aspectFit"></image> -->
              <text class="cicon-person" style="font-size: 50rpx;color: #DB696F;"></text>
          </view>
          <text class="action-item-label">建立分会</text>
        </view>
      </view>

      <!-- Modern City Location Bar -->
      <view class="city-location-card" @tap="Tocity">
        <view class="location-content">
          <view class="location-icon-container">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="location-icon">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
              <circle cx="12" cy="10" r="3"></circle>
            </svg>
          </view>
          <view class="location-details">
            <text class="location-label">当前位置</text>
            <text class="city-name">北京市</text>
          </view>
        </view>
        <view class="location-action">
          <text class="action-text">切换城市</text>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="arrow-icon">
            <polyline points="9 18 15 12 9 6"></polyline>
          </svg>
        </view>
      </view>

      <!-- Refactored Activity Feed -->
      <view class="activity-feed-container">
        <view class="feed-tabs-navigation">
          <view v-for="(tab, index) in tabs" :key="index" class="feed-tab-link"
            :class="{ 'active-feed-tab': currentTab === tab.value }" @tap="changeTab(tab.value)">
            {{ tab.label }}
          </view>
        </view>

        <view class="feed-items-list">
          <!-- Branch Activities -->
          <template v-if="currentTab === 'branch'">
            <view v-for="(activity, index) in branchActivities" :key="activity.id" class="activity-item-entry"
              @tap="navigateToActivity(activity.id)">
              <view class="activity-item-body">
                <image class="item-entry-thumbnail" :src="activity.coverImage" mode="aspectFill"></image>
                <view class="item-entry-details">
                  <text class="item-entry-title">{{ activity.activityTitle }}</text>
                  <view class="item-entry-tags-group">
                    <text v-for="(tag, tagIndex) in activity.displayTags" :key="tagIndex" class="tag-capsule">{{ tag }}</text>
                  </view>
                  <view class="item-entry-meta-info">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="meta-info-icon">
                      <circle cx="12" cy="12" r="10"></circle>
                      <polyline points="12 6 12 12 16 14"></polyline>
                    </svg>
                    <text class="meta-info-text">{{ activity.activityTime }}</text>
                  </view>
                  <view class="item-entry-meta-info">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="meta-info-icon">
                      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                      <circle cx="12" cy="10" r="3"></circle>
                    </svg>
                    <text class="meta-info-text">{{ activity.displayAddress }}</text>
                  </view>
                </view> <!-- Closing item-entry-details -->
              </view> <!-- Closing activity-item-body -->
              <view class="item-entry-footer">
                <text class="item-entry-participants">{{ activity.peopleNum }}人参与</text>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="item-entry-arrow">
                  <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
              </view>
            </view>
          </template>

          <!-- Local Activities -->
          <template v-if="currentTab === 'local'">
            <view v-for="(activity, index) in localActivities" :key="activity.id" class="activity-item-entry"
              @tap="navigateToActivity(activity.id)">
              <view class="activity-item-body">
                <image class="item-entry-thumbnail" :src="activity.coverImage" mode="aspectFill"></image>
                <view class="item-entry-details">
                  <text class="item-entry-title">{{ activity.activityTitle }}</text>
                  <view class="item-entry-tags-group">
                    <text v-for="(tag, tagIndex) in activity.displayTags" :key="tagIndex" class="tag-capsule">{{ tag }}</text>
                  </view>
                  <view class="item-entry-meta-info">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="meta-info-icon">
                      <circle cx="12" cy="12" r="10"></circle>
                      <polyline points="12 6 12 12 16 14"></polyline>
                    </svg>
                    <text class="meta-info-text">{{ activity.activityTime }}</text>
                  </view>
                  <view class="item-entry-meta-info">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="meta-info-icon">
                      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                      <circle cx="12" cy="10" r="3"></circle>
                    </svg>
                    <text class="meta-info-text">{{ activity.displayAddress }}</text>
                  </view>
                </view> <!-- Closing item-entry-details -->
              </view> <!-- Closing activity-item-body -->
              <view class="item-entry-footer">
                <text class="item-entry-participants">{{ activity.peopleNum }}人参与</text>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="item-entry-arrow">
                  <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
              </view>
            </view>
          </template>

          <!-- History Activities -->
          <template v-if="currentTab === 'history'">
            <view v-for="(activity, index) in historyActivities" :key="activity.id" class="activity-item-entry"
              @tap="navigateToActivity(activity.id)">
              <view class="activity-item-body">
                <image class="item-entry-thumbnail" :src="activity.coverImage" mode="aspectFill"></image>
                <view class="item-entry-details">
                  <text class="item-entry-title">{{ activity.activityTitle }}</text>
                  <view class="item-entry-tags-group">
                    <text v-for="(tag, tagIndex) in activity.displayTags" :key="tagIndex" class="tag-capsule">{{ tag }}</text>
                  </view>
                  <view class="item-entry-meta-info">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="meta-info-icon">
                      <circle cx="12" cy="12" r="10"></circle>
                      <polyline points="12 6 12 12 16 14"></polyline>
                    </svg>
                    <text class="meta-info-text">{{ activity.activityTime }}</text>
                  </view>
                  <view class="item-entry-meta-info">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="meta-info-icon">
                      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                      <circle cx="12" cy="10" r="3"></circle>
                    </svg>
                    <text class="meta-info-text">{{ activity.displayAddress }}</text>
                  </view>
                </view> <!-- Closing item-entry-details -->
              </view> <!-- Closing activity-item-body -->
              <view class="item-entry-footer">
                <text class="item-entry-participants">{{ activity.peopleNum }}人参与</text>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="item-entry-arrow">
                  <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
              </view>
              <view class="item-entry-status-badges">
                <text v-if="activity.isCompleted" class="status-badge completed-badge">已结束</text>
              </view>
            </view>
          </template>
        </view>
      </view>

    </scroll-view>
  </s-layout>
</template>

<script setup>
import { ref } from "vue";
import sheep from "@/sheep";
sheep.$store("user").isLogin = true;

// 响应式状态
const currentTab = ref("branch");

// 标签页数据
const tabs = ref([
  {
    label: "分会活动",
    value: "branch",
  },
  {
    label: "同城活动",
    value: "local",
  },
  {
    label: "历史活动",
    value: "history",
  },
]);

// 分会活动数据
const branchActivities = ref([
  {
      id: 1,
      activityTitle: "《百年孤独》读书分享会",
      activityTime: "2025年4月15日 14:00-16:00",
      displayAddress: "北京市朝阳区国贸中心",
      peopleNum: 18,
      displayTags: ["文学", "线下活动"],
      type: "book",
      mode: "offline",
      coverImage: "https://imagecgr.oss-cn-beijing.aliyuncs.com/hunaderyearsjpg.jpg",
      isHot: true,
  },
  {
    id: 2,
    activityTitle: "科幻小说创作交流会",
    activityTime: "2025年4月20日 19:00-21:00",
    displayAddress: "线上活动",
    peopleNum: 24,
    displayTags: ["科幻", "创作"],
    type: "book",
    mode: "online",
    coverImage: "https://imagecgr.oss-cn-beijing.aliyuncs.com/kehuan.jpg",
    isUpcoming: true,
  },
  {
    id: 3,
    activityTitle: "经典文学作品赏析",
    activityTime: "2025年4月25日 15:00-17:00",
    displayAddress: "上海市静安区图书馆",
    peopleNum: 12,
    displayTags: ["经典", "赏析"],
    type: "book",
    mode: "offline",
    coverImage: "https://imagecgr.oss-cn-beijing.aliyuncs.com/JDwenxue.jpg",
  },
]);

// 同城活动数据
const localActivities = ref([
  {
    id: 4,
    activityTitle: "本地诗歌朗诵会",
    activityTime: "2025年4月18日 19:30-21:30",
    displayAddress: "北京市海淀区五道口咖啡馆",
    peopleNum: 15,
    displayTags: ["诗歌", "朗诵"],
    type: "poetry",
    mode: "offline",
    coverImage: "/static/images/activity-4.jpg",
  },
  {
    id: 5,
    activityTitle: "亲子阅读活动",
    activityTime: "2025年4月19日 10:00-12:00",
    displayAddress: "北京市朝阳区中央公园",
    peopleNum: 30,
    displayTags: ["亲子", "户外"],
    type: "family",
    mode: "offline",
    coverImage: "/static/images/activity-5.jpg",
    isHot: true,
  },
]);

// 历史活动数据
const historyActivities = ref([
  {
    id: 6,
    activityTitle: "《人类简史》读书会",
    activityTime: "2025年3月25日 14:00-16:00",
    displayAddress: "北京市海淀区中关村图书馆",
    peopleNum: 22,
    displayTags: ["历史", "科普"],
    type: "book",
    mode: "offline",
    coverImage: "/static/images/activity-6.jpg",
    isCompleted: true,
  },
  {
    id: 7,
    activityTitle: "古典文学鉴赏",
    activityTime: "2025年3月15日 15:00-17:00",
    displayAddress: "线上活动",
    peopleNum: 18,
    displayTags: ["古典", "文学"],
    type: "book",
    mode: "online",
    coverImage: "/static/images/activity-7.jpg",
    isCompleted: true,
  },
]);

// 方法
const changeTab = (tab) => {
  currentTab.value = tab;
};

const navigateToActivity = (id) => {
  uni.navigateTo({
    url: `/pages/book/activity/detail?id=${id}`,
  });
};

const TocreateActivity = () => {
  uni.navigateTo({
    url: '/pages/book/activity/addModel'
  });
};

const Tocity = () => {
  uni.navigateTo({
    url: '/pages/city/city'
  });
};

const handleAction = (type) => {
  let message = "";
  switch (type) {
    case "member":
      message = "会员功能开发中";
      break;
    case "create":
      message = "发起活动功能开发中";
      break;
    case "branch":
      message = "建立分会功能开发中";
      break;
  }

  uni.showToast({
    title: message,
    icon: "none",
  });
};
</script>

<style lang="scss" scoped>
$clr-primary: #E53935; // 红色主题
$clr-secondary: #FFB300; // 点缀色（橙黄）
$clr-accent: #F4A261; // 其他点缀
$clr-neutral-light: #FEFBF6; // Off-white
$clr-neutral-medium: #A9A9A9; // Medium Gray
$clr-neutral-dark: #222; // 黑色字体
$clr-white: #FFFFFF;
$clr-black: #000000;

// Refactored Typography & Spacing
$font-main: 'Helvetica Neue', Arial, sans-serif;
$font-alt: 'Georgia', serif;

$spacing-xs: 8rpx;
$spacing-sm: 16rpx;
$spacing-md: 24rpx;
$spacing-lg: 32rpx;
$spacing-xl: 48rpx;

$radius-sm: 8rpx;
$radius-md: 16rpx;
$radius-lg: 24rpx;

$shadow-light: 0 2rpx 8rpx rgba($clr-black, 0.08);
$shadow-medium: 0 6rpx 15rpx rgba($clr-black, 0.1);

.refactored-page-wrapper {
  font-family: $font-main;
  background-color: $clr-neutral-light;
  min-height: 100vh;
  color: $clr-neutral-dark;
}

/* Refactored Hero Banner */
.hero-banner-container {
  position: relative;
  height: 420rpx;
  margin-bottom: $spacing-lg;

  .hero-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba($clr-black, 0.65) 0%, rgba($clr-black, 0.1) 70%);
  }

  .hero-banner-content {
    position: absolute;
    bottom: $spacing-md;
    left: $spacing-md;
    right: $spacing-md;
    color: $clr-white;
  }

  .hero-banner-title {
    font-family: $font-alt;
    font-size: 52rpx;
    font-weight: 700;
    display: block;
    margin-bottom: $spacing-xs;
    text-shadow: 0 2rpx 5rpx rgba($clr-black, 0.4);
    color: $clr-primary;
  }

  .hero-banner-subtitle {
    font-size: 30rpx;
    opacity: 0.9;
  }
}

/* Refactored Quick Actions Bar */
.quick-actions-bar {
  display: flex;
  justify-content: space-around;
  padding: $spacing-sm $spacing-md $spacing-lg;
  background-color: $clr-white;
  margin: 0 $spacing-md $spacing-lg;
  border-radius: $radius-lg;
  box-shadow: $shadow-medium;

  .action-item-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $spacing-xs;
    cursor: pointer;
    transition: transform 0.2s ease;

    &:active {
      transform: scale(0.95);
    }
  }

  .action-icon-container {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $clr-neutral-light; // Default, can be overridden
    box-shadow: $shadow-light;

    &.member-bg {
      background-color: lighten($clr-primary, 35%);
    }

    &.create-bg {
      background-color: lighten($clr-secondary, 35%);
    }

    &.branch-bg {
      background-color: lighten($clr-accent, 35%);
    }

    &.city-bg {
      background-color: lighten($clr-neutral-medium, 35%);
    }
  }

  .action-icon-image {
    width: 50rpx;
    height: 50rpx;
  }

  .action-item-label {
    font-size: 24rpx;
    color: $clr-neutral-dark;
    font-weight: 500;
  }
}

/* Modern City Location Card */
.city-location-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $spacing-md $spacing-lg;
  background: linear-gradient(135deg, lighten($clr-primary, 45%) 0%, lighten($clr-secondary, 45%) 100%);
  margin: 0 $spacing-md $spacing-lg;
  border-radius: $radius-lg;
  box-shadow: $shadow-medium;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 8rpx rgba($clr-black, 0.1);
  }

  .location-content {
    display: flex;
    align-items: center;
    gap: $spacing-md;
  }

  .location-icon-container {
    background-color: rgba($clr-primary, 0.1);
    padding: $spacing-sm;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .location-icon {
    stroke: $clr-primary;
    width: 48rpx;
    height: 48rpx;
  }

  .location-details {
    display: flex;
    flex-direction: column;
  }

  .location-label {
    font-size: 24rpx;
    color: $clr-neutral-medium;
  }

  .city-name {
    font-size: 32rpx;
    font-weight: 600;
    color: $clr-primary;
    margin-top: $spacing-xs;
  }

  .location-action {
    display: flex;
    align-items: center;
    gap: $spacing-xs;
  }

  .action-text {
    font-size: 26rpx;
    color: $clr-primary;
    font-weight: 500;
  }

  .arrow-icon {
    stroke: $clr-primary;
    width: 40rpx;
    height: 40rpx;
  }
}

/* Refactored Activity Feed */
.activity-feed-container {
  padding: 0 $spacing-md $spacing-xl;
}

.feed-tabs-navigation {
  display: flex;
  margin-bottom: $spacing-lg;
  background-color: $clr-white;
  border-radius: $radius-md;
  padding: $spacing-xs;
  box-shadow: $shadow-light;

  .feed-tab-link {
    flex: 1;
    text-align: center;
    padding: $spacing-sm 0;
    font-size: 28rpx;
    color: $clr-neutral-medium;
    border-radius: $radius-sm;
    transition: all 0.3s ease;
    font-weight: 600;
    cursor: pointer;

    &.active-feed-tab {
      background-color: $clr-primary;
      color: $clr-white;
      box-shadow: 0 3rpx 10rpx rgba($clr-primary, 0.4);
    }
  }
}

.feed-items-list {
  display: grid;
  grid-template-columns: 1fr; // Single column for mobile-first
  gap: $spacing-lg;
}

/* Refactored Activity Item Entry */
.activity-item-entry {
  background-color: $clr-white;
  border-radius: $radius-lg;
  box-shadow: $shadow-medium;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative; // For status badges

  &:active {
    transform: translateY(-4rpx);
    box-shadow: 0 8rpx 20rpx rgba($clr-black, 0.12);
  }

  .activity-item-body {
    display: flex;
    flex-direction: row;
    padding: $spacing-md $spacing-md $spacing-sm $spacing-md;
    align-items: flex-start; 
  }

  .item-entry-thumbnail {
    width: 200rpx; 
    height: 250rpx; 
    object-fit: cover;
    border-radius: $radius-sm; 
    margin-right: $spacing-md; 
    flex-shrink: 0; 
  }

  .item-entry-details {
    flex: 1; 
    display: flex;
    flex-direction: column;
    // padding: $spacing-md; // This padding is now handled by .activity-item-body
  }

  .item-entry-title {
    font-family: $font-alt;
    font-size: 36rpx;
    font-weight: 600;
    color: $clr-neutral-dark;
    margin-bottom: $spacing-sm;
    line-height: 1.3;
  }

  .item-entry-tags-group {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-xs;
    margin-bottom: $spacing-md;

    .tag-capsule {
      font-size: 22rpx;
      padding: $spacing-xs $spacing-sm;
      background-color: lighten($clr-secondary, 30%);
      color: darken($clr-secondary, 10%);
      border-radius: $radius-sm;
      font-weight: 500;
    }
  }

  .item-entry-meta-info {
    display: flex;
    align-items: center;
    gap: $spacing-xs;
    margin-bottom: $spacing-xs;
    color: $clr-neutral-medium;
    font-size: 26rpx;

    .meta-info-icon {
      stroke: $clr-neutral-medium;
      flex-shrink: 0;
    }

    .meta-info-text {
      line-height: 1.4;
    }
  }

  .item-entry-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $spacing-sm $spacing-md;
    border-top: 1rpx solid lighten($clr-neutral-medium, 30%);
    margin-top: $spacing-sm;

    .item-entry-participants {
      font-size: 26rpx;
      color: $clr-primary;
      font-weight: 600;
    }

    .item-entry-arrow {
      stroke: $clr-primary;
    }
  }

  .item-entry-status-badges {
    position: absolute;
    top: $spacing-md;
    left: $spacing-md;
    display: flex;
    gap: $spacing-xs;
    z-index: 2;

    .status-badge {
      font-size: 22rpx;
      font-weight: 600;
      padding: $spacing-xs $spacing-sm;
      border-radius: $radius-sm;
      color: $clr-white;
      text-shadow: 0 1rpx 2rpx rgba($clr-black, 0.2);
	  
      &.hot-badge {
        background: linear-gradient(135deg, $clr-primary, $clr-secondary);
      }

      &.upcoming-badge {
        background: linear-gradient(135deg, $clr-secondary, $clr-accent);
      }

      &.completed-badge {
        background: $clr-neutral-medium;
      }
    }
  }
}

// Responsive adjustments (optional, for larger screens if needed)
@media (min-width: 768px) {
  .feed-items-list {
    grid-template-columns: repeat(auto-fit, minmax(300rpx, 1fr));
  }
}
</style>
